function download() {
    var dt = canvas.toDataURL(mimeType);
    $('#downloadresizedimage').attr('download', originalFileName.replace('.', '-' + $('#image-width').val() + '.'));
    this.href = dt;

    $('#social').fadeIn(5000);
    };
    downloadresizedimage.addEventListener('click', download, false);

    var originalMouseX = null;
    var originalMouseY = null;

    var originalWidth = null;

    $('#image-display').mousedown(function (e) {
    //var offset = $(this).offset();
    //alert(e.pageX - offset.left);
    //alert(e.pageY - offset.top);

    originalMouseX = e.pageX;
    originalMouseY = e.pageY;
    originalWidth = $('#image-width').val();
    });

    $('#image-display').mousemove(function (e) {

    var currentMouseX = e.pageX;
    var currentMouseY = e.pageY;

    var differenceInWidth = (originalMouseX - currentMouseX);
    var differenceInHeight = (originalMouseY - currentMouseY);

    /*  TOO COMPLICATED - NEEDS TO ALSO TAKE IN RATIO OF HEIGHT TO CHANGE WIDTH - TODO
    if (Math.abs(differenceInHeight) > Math.abs(differenceInWidth)) {
    newWidth = originalWidth -
    }
    */

    newWidth = originalWidth - differenceInWidth;

    if (originalMouseX != null) {

    $('#image-width').val(newWidth);
    refreshImage();
    }
    });

    $('#image-display').mouseup(function (e) {

    originalMouseX = null;
    originalMouseY = null;
    originalWidth = null;
    });




    var originalImageObject = null;

    var originalFileName;

    var mimeType;

    var canvas;

    function refreshImage() {

    var img = $('#image-display');

    var imageWidth = $('#image-width');

    newWidth = imageWidth.val();

    if (!jQuery.isNumeric(newWidth) ||  newWidth < 1 || newWidth > 10000) {
    img.src = '';
    img.hide();
    } else {
    img.show();
    }

    oldWidth = originalImageObject.width;
    oldHeight = originalImageObject.height;


    if (oldWidth != newWidth) {
    $('#downloadresizedimage').show();
    } else {
    $('#downloadresizedimage').hide();
    }

    newHeight = newWidth / oldWidth * oldHeight;

    canvas = $('#image-canvas')[0];

    canvas.setAttribute('width', newWidth);
    canvas.setAttribute('height', newHeight);
    var context = canvas.getContext('2d');

    context.drawImage(originalImageObject, 0, 0, canvas.width, canvas.height);

    // var context = canvas.getContext('2d');


    if (originalFileName.toLowerCase().indexOf('.jpg') >= 0 || originalFileName.toLowerCase().indexOf('.jpeg') >= 0) {
    mimeType = 'image/jpeg';
    } else if (originalFileName.toLowerCase().indexOf('.bmp') >= 0) {
    mimeType = 'image/bmp';
    } else if (originalFileName.toLowerCase().indexOf('.gif') >= 0) {
    mimeType = 'image/gif';
    } else if (originalFileName.toLowerCase().indexOf('.png') >= 0) {
    mimeType = 'image/png';
    } else if (originalFileName.toLowerCase().indexOf('.tif') >= 0) {
    mimeType = 'image/tif';
    }

    img.attr('src', canvas.toDataURL(mimeType));

    }

    $("#image-width").keyup(function () {
    refreshImage();
    });


    function processFile(blob, fileName) {

    originalFileName = fileName;

    var reader = new window.FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function () {

    base64data = reader.result;

    $('<img>', { src: base64data }).on('load', function () {

    $('#image-display').show();
    $('#file-drop-zone').addClass('collapsedDropZone');
    $('#image-width-container').show();

    // not sure how else to assign to HTMLImageElement (rather than just to object)
    originalImageObject = this;

    var imageWidth = $('#image-width');
    imageWidth.val(originalImageObject.width);
    imageWidth.focus();
    imageWidth.select();

    refreshImage();

    });



    }



    }









function replaceAll(find, replace, str) {
    return str.replace(new RegExp(find, 'g'), replace);
}

function beautify(str) {


    var result = '';

    var length = str.length;

    var i = 0;

    var braceCountLeft = 0;
    var braceCountRight = 0;

    var withinQuotes = false;

    while (i < length) {

        var c = str[i];

        if (c == '"' && (i == 0 || c[i - 1] != '\\')) {
            // non-escaped quotes
            withinQuotes = !withinQuotes;
        }

        if (!withinQuotes && (c == '}' || c == '{' || c == ',')) {

            console.log('Start####' + result);

            // look back and remove carriage returns and whitespace that are already there

            var resultIndex = result.length - 1;
            while (resultIndex >= 0 && (result[resultIndex] == ' ' || result[resultIndex] == '\r' || result[resultIndex] == '\n' || result[resultIndex] == '\t')) {

                resultIndex = resultIndex - 1;
                result = result.substr(0, resultIndex + 1);

                console.log('char ' + result[resultIndex] + '-----' + result + 'zzz ' + result.length + ' ' + resultIndex);

            }


            if (c == '{') {
                braceCountLeft++;
                result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
            } else if (c == '}') {
                braceCountRight++;
                // precede with carriage return
                result += '\r' + GetTabs(braceCountLeft - braceCountRight) + c;
            } else if (c == ',') {
                result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
            }

            var nextChar = '';

            // advance through whitespace and remove carriage returns that are already there
            while (i < length && (str[i + 1] == ' ' || str[i + 1] == '\r' || str[i + 1] == '\n' || str[i + 1] == '\t')) {
                i++;
            }

        } else {

            result += str[i];

        }


        i++;

    }

    return result;

}

function GetTabs(count) {

    var result = '';

    for (var i = 0; i < count; i++) {
        result += '    ';
    }

    return result;

}